<template>
  <div class="support-page">
    <!-- 头部导航 -->
    <HeaderNav />
    
    <!-- 主要内容区域 -->
    <div class="support-container">
      <div class="support-header">
        <h1 class="page-title">
          <el-icon class="title-icon"><Star /></el-icon>
          帮助中心 & 支持一下
        </h1>
        <p class="page-subtitle">感谢您使用宝可得商城，有任何问题都可以联系我们！</p>
      </div>
      
      <div class="support-content">
        <!-- 左侧联系信息 -->
        <div class="contact-section">
          <div class="contact-card">
            <div class="card-header">
              <el-icon class="header-icon"><User /></el-icon>
              <h2>联系制作人</h2>
            </div>
            
            <div class="contact-info">
              <div class="creator-info">
                <div class="avatar-section">
                  <div class="avatar">
                    <img 
                      src="http://baokede.ataotao.top/baokedePhoto/baokede/atao.jpg" 
                      alt="阿涛头像" 
                      class="avatar-image"
                      @error="handleAvatarError"
                    />
                  </div>
                  <div class="creator-name">阿涛</div>
                  <div class="creator-title">全栈开发工程师</div>
                </div>
                
                <div class="contact-details">
                  <div class="contact-item">
                    <el-icon class="contact-icon"><Message /></el-icon>
                    <div class="contact-content">
                      <div class="contact-label">QQ邮箱</div>
                      <div class="contact-value-row">
                        <span class="contact-value">1981288265@qq.com</span>
                        <el-button 
                          size="small" 
                          type="primary" 
                          @click="copyEmail"
                          class="copy-btn"
                        >
                          复制邮箱
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="special-thanks">
                <h3>
                  <el-icon><Star /></el-icon>
                  特别致谢
                </h3>
                <div class="thanks-content">
                  <p class="thanks-text">
                    感谢所有参与宝可得商城开发的团队成员，
                    正是因为大家的共同努力和无私奉献，
                    才有了这个优秀的电商平台。
                  </p>
                  <div class="thanks-signature">
                    <el-icon class="heart-icon"><Promotion /></el-icon>
                    <span>致敬每一位开发者的辛勤付出！</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧支付码 -->
        <div class="support-section">
          <div class="support-card">
            <div class="card-header">
              <el-icon class="header-icon"><Wallet /></el-icon>
              <h2>支持一下</h2>
            </div>
            
            <div class="support-content-inner">
              <div class="support-text">
                <p>如果这个项目对您有帮助，</p>
                <p>欢迎请作者喝杯咖啡 ☕</p>
                <div class="support-badges">
                  <el-tag type="success" effect="light">开源项目</el-tag>
                  <el-tag type="warning" effect="light">团队开发</el-tag>
                  <el-tag type="info" effect="light">持续更新</el-tag>
                </div>
              </div>
              
              <div class="qr-code-section">
                <div class="qr-code-container">
                  <img 
                    :src="payQRCode" 
                    alt="支付二维码" 
                    class="qr-code-image"
                    @error="handleImageError"
                  />
                  <div class="qr-code-label">
                    <el-icon><Present /></el-icon>
                    扫码支持
                  </div>
                </div>
              </div>
              
              
              <div class="thank-you">
                <el-icon class="heart-icon"><Promotion /></el-icon>
                <p>您的支持是我持续开发的动力！</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Star, 
  User, 
  Message, 
  Wallet, 
  Present,
  Promotion
} from '@element-plus/icons-vue'
import HeaderNav from '../../components/layout/HeaderNav.vue'

// 支付二维码地址
const payQRCode = ref('http://baokede.ataotao.top/baokedePhoto/baokede/pay.png')

// 复制邮箱
const copyEmail = async () => {
  try {
    await navigator.clipboard.writeText('1981288265@qq.com')
    ElMessage.success('邮箱地址已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败，请手动复制')
  }
}

// 图片加载错误处理
const handleImageError = () => {
  ElMessage.warning('二维码加载失败，请稍后重试')
}

// 头像加载错误处理
const handleAvatarError = (event: Event) => {
  const img = event.target as HTMLImageElement
  // 头像加载失败时显示默认图标
  img.style.display = 'none'
  const parent = img.parentElement
  if (parent) {
    parent.innerHTML = '<i class="el-icon" style="font-size: 40px; color: white;"><svg viewBox="0 0 1024 1024" width="40" height="40"><path fill="currentColor" d="M512 512a192 192 0 1 0 0-384 192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512zm320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0z"></path></svg></i>'
  }
}
</script>

<style scoped lang="scss">
.support-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.support-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.support-header {
  text-align: center;
  margin-bottom: 1.5rem;
  color: white;
  flex-shrink: 0;
  
  .page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    
    .title-icon {
      color: #ffd700;
      animation: sparkle 2s ease-in-out infinite;
    }
  }
  
  .page-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
  }
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(180deg); }
}

.support-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  flex: 1;
  align-items: stretch;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.contact-card, .support-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
  
  .header-icon {
    color: #667eea;
    font-size: 1.5rem;
  }
  
  h2 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
  }
}

.avatar-section {
  text-align: center;
  margin-bottom: 2.5rem;
  
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    overflow: hidden;
    
    .avatar-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
  }
  
  .creator-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
  }
  
  .creator-title {
    color: #666;
    font-size: 0.9rem;
  }
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: #f8f9ff;
  border-radius: 12px;
  
  .contact-icon {
    color: #667eea;
    font-size: 1.2rem;
    margin-top: 0.2rem;
  }
  
  .contact-content {
    flex: 1;
    
    .contact-label {
      font-size: 0.9rem;
      color: #666;
      margin-bottom: 0.5rem;
    }
    
    .contact-value-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      
      .contact-value {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        flex: 1;
      }
      
      .copy-btn {
        font-size: 0.8rem;
        flex-shrink: 0;
      }
    }
  }
}

.special-thanks {
  margin-top: 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #ffeaa7, #fab1a0);
  border-radius: 12px;
  border: 2px solid #fdcb6e;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2d3436;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    
    .el-icon {
      color: #e17055;
      animation: sparkle 2s ease-in-out infinite;
    }
  }
  
  .thanks-content {
    .thanks-text {
      color: #2d3436;
      line-height: 1.6;
      margin-bottom: 1.5rem;
      font-size: 0.95rem;
      text-align: center;
    }
    
    .thanks-signature {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.75rem;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 8px;
      font-weight: 600;
      color: #2d3436;
      
      .heart-icon {
        color: #e84393;
        animation: heartbeat 1.5s ease-in-out infinite;
      }
    }
  }
}

.support-content-inner {
  text-align: center;
}

.support-text {
  margin-bottom: 2rem;
  
  p {
    font-size: 1.1rem;
    color: #333;
    margin: 0.5rem 0;
  }
  
  .support-badges {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
  }
}

.qr-code-section {
  margin: 2rem 0;
}

.qr-code-container {
  display: inline-block;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 20px;
  overflow: hidden;
  
  .qr-code-image {
    width: 240px;
    height: 300px;
    border-radius: 12px;
    display: block;
    background: white;
    object-fit: cover;
    margin: -10px;
  }
  
  .qr-code-label {
    color: white;
    margin-top: 0.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }
}

.support-amounts {
  margin: 2rem 0;
  
  .amounts-title {
    color: #666;
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }
  
  .amount-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
}

.thank-you {
  margin-top: 1.5rem;
  margin-bottom: 0;
  padding: 1rem;
  background: linear-gradient(135deg, #ff9a9e, #fecfef);
  border-radius: 12px;
  
  .heart-icon {
    color: #e74c3c;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    animation: heartbeat 1.5s ease-in-out infinite;
  }
  
  p {
    margin: 0;
    color: #333;
    font-weight: 600;
  }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
</style>
